<template>
  <div class="content">
    <HeaderView @searchingBtn="searchingBtn" @addBtn="addBtn" />
    <div class="card_list">
      <TableCommonView
        :table-list="tableList"
        @selTableCol="selTableCol"
        :colOpenShow="false"
      >
        <template slot="tableButton">
          <el-table-column label="状态" width="60" prop="statusTwo">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.statusTwo"
                @change="(val) => isCoreEvent(val, scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </template>
      </TableCommonView>
    </div>
    <div class="btn-pager">
      <PagerView
        class="page"
        :pager-options="pagerOptions"
        layout="sizes, prev, pager, next"
        v-on="pagerEvents"
      />
    </div>
    <AddLabelDialog :editFormDialog="editData" @saveClick="getData">
    </AddLabelDialog>
  </div>
</template>

<script>
import HeaderView from "@/views/labelManagement/components/headerView";
import AddLabelDialog from "@/views/labelManagement/components/AddLabelDialog.vue";
import pageMixin from "@/components/makepager/pager/mixin/pageMixin";
import { getLabelList, updateStatus } from "@/api/labelManagement/index";
export default {
  name: "labelManagement",
  mixins: [pageMixin],
  props: {},
  components: {
    HeaderView,
    AddLabelDialog,
  },
  data() {
    return {
      tableList: {},
      tableColumn: [
        { label: "标签名称", prop: "name", min: 100 },
        { label: "描述", prop: "comment", min: 120 },
        // { label: "操作人", prop: "area", },
        { label: "添加时间", prop: "createDate", min: 180 },
      ],
      showCol: ["标签名称", "描述", "添加时间"],
      editData: {
        visible: false,
        title: "添加",
        infomation: {},
      },
      labelForm: {
        keyword: "",
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {},
  watch: {},
  computed: {},
  mounted() {
    this.setTable();
    this.getData();
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        // selectIndex: true,
        border: false,
        showcol: this.showCol,
        allcol: [],
        selectBox: false,
        tableColumn: this.setColumnVisible(this.showCol),
      };
      this.tableList.allcol = this.tableList.tableColumn
        .filter((ele) => !ele.default)
        .map((ele) => ele.label);
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label),
        };
      });
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    //获取首次渲染数据
    async getData() {
      this.labelForm.page = this.pagerOptions.currPage;
      this.labelForm.pageSize = this.pagerOptions.pageSize;
      let params = JSON.parse(JSON.stringify(this.labelForm));
      var res = await getLabelList(params);
      const arr = res.data.data || [];
      for (let i in arr) {
        arr[i].statusTwo = arr[i].status == 1 ? true : false;
      }
      this.tableList.tableInfomation = arr;
      this.pagerOptions.totalCount = res.data.total;
    },
    isCoreEvent(val, row) {
      let data = JSON.parse(JSON.stringify(row));
      let params = {
        ID: data.ID,
        status: data.statusTwo ? 1 : 2,
      };
      updateStatus(params).then((res) => {
        if (res.success) {
          this.$message.success("操作成功！");
          this.getData();
        }
      });
    },
    handleClick(row) {
      let data = JSON.parse(JSON.stringify(row));
      this.editData.infomation = {
        comment: data.comment,
        name: data.name,
        ID: data.ID,
      };
      this.editData.title = "编辑";
      this.editData.visible = true;
    },
    searchingBtn(form) {
      // 上面的搜索列表
      this.labelForm.keyword = form.searchText;
      this.getData();
    },
    addBtn() {
      // 添加标签
      this.editData.infomation = {
        comment: "",
        name: "",
      };
      this.editData.title = "添加";
      this.editData.visible = true;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  width: 100%;

  // height: calc(100vh - 50px);
  .card_list {
    width: calc(100% - 20px);
    height: calc(100% - 75px - 60px - 24px);
    margin-top: 24px;
    overflow-y: auto;
    margin-right: 20px;
  }
  .btn-pager {
      width: calc(100% - 40px);
      justify-content: left;
      position:relative;
    }
}

::v-deep {
}
</style>
